import { Suspense, FC } from "react";

import routerConfig from "./routerConfig";
import {
    BrowserRouter,
    HashRouter,
    Routes,
    Route,
    Navigate,
} from "react-router-dom";
import { ChildrenItem } from "../utils/types";



function renderRoute (routes:ChildrenItem[]) {
    return routes.map((item,index) => {
        return <Route
            key={index}
            path={item.path}
            element={item.redirect ? <Navigate to={item.redirect}/> : <item.component/>}
        >
            {
                item.children && renderRoute(item.children)
            }
        </Route>
    })
}




const RouterView: FC = () => {
    const { mode="history" , routes} = routerConfig;
    return (
        <Suspense fallback="正在加载中。。。。。。">
            {
                mode === "history" ? <BrowserRouter>
                    <Routes>
                        {
                            renderRoute(routes)
                        }
                    </Routes>
                </BrowserRouter> : <HashRouter>
                    <Routes>
                        {
                            renderRoute(routes)
                        }
                    </Routes>
                </HashRouter>
            }
        </Suspense>
    )
};


export default RouterView;








